import { Typography, Card, Button, Row, Col } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import { localOperation, filterUnit, round } from "@/utils";
import config from '@/utils/config'
import { useRouter } from 'vue-router'
import "./index.less";
const { Title, Text } = Typography;
const { webpage } = config
const Home = defineComponent({

  setup() {
    const $router = useRouter()
    const state = reactive({
      gatherError: JSON.parse(localOperation.get("gatherError") as any) || [],
      isSuspend: JSON.parse(localOperation.get("isSuspend") as any) || {
        frequency: 0,
        duration: 0,
      },
      fraction: localOperation.get("fraction") || 0,
      total: localOperation.get("total") || 0,
      actualTotal: localOperation.get("actualTotal") || 0
    });
    const howToShowTotalScore = function (){
      if(+state.total === +state.actualTotal){
        if(state.gatherError.length){
          return false
        }
        return true
      }
      return false
    }

    return () => (
      <div class="result-container">
        <Title>总得分：{ howToShowTotalScore() ? 100 : round(Number(state.fraction), 1) }分</Title>
        <Title class="time-title">
          暂停次数:{state.isSuspend.frequency}次&nbsp;&nbsp;&nbsp;&nbsp;暂停时间
          {state.isSuspend.duration}秒
        </Title>
        {state.gatherError.length >= 1 && (
          <Card
            class="cards"
            type="inner"
            title={<Title class="card-title" level={3}>错题列表</Title>}
            extra={<Button size="large" type="danger" onClick={() => {
              $router.replace({ path: '/revision' })
            }}>订正</Button>}
          >
            <Row>
              {state.gatherError.map((item: any, index: any) => {
                return (
                  <Col class="card-item" span={6}>
                    {item.L}
                    {filterUnit(item.type)}
                    {item.R}
                  </Col>
                );
              })}
            </Row>
          </Card>
        )}
        {
          state.gatherError.length < 1 && (<Button onClick={() => {
            $router.replace({ path: '/' })
          }} class="agin" type="danger">再来一次</Button>)
        }
        {!state.gatherError && (<Button size="large" type="primary" class="result-again" onClick={() => { $router.replace({ path: '/' }) }}>再来一次</Button>)}
        <Card class="thanks">
          <Text>鸣谢：</Text>
          {webpage.map((item: any) => <Text>{item}</Text>)}
        </Card>
      </div>
    );
  },
});
export default Home;
